import React, { Component } from 'react'

import ShopCarContainer from './ShopCarStyleComp'

import { Checkbox, Flex } from 'antd-mobile'

import ShopItem from './ShopItem.js'

import BScroll from 'better-scroll'

import ShopFoot from './ShopFoot.js'

const AgreeItem = Checkbox.AgreeItem;




class ShopCar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editFlag: false,
            shopCardata:null,
            allFlag:true,
        };
    }
    componentDidMount() {
        if(localStorage.getItem('shopcar')){
            this.setState({
                shopCardata:Object.values(JSON.parse(localStorage.getItem('shopcar')))
            })
        }

        setTimeout(() => {
            new BScroll(this.ShopCarContainer,{
                click:true,
            })
        }, 1)

    }

    onChange = (val, a) => {
        val = !val
       
        console.log('xuanze')
    }

    allselect = (e) => {
        this.setState({
            allFlag:!this.state.allFlag
        })
        console.log('checkbox', e)
    }

    render() {
        console.log(this.state.shopCardata)
        return (
            <ShopCarContainer ref={el => this.ShopCarContainer = el}>
                <div>
                    {this.state.shopCardata &&
                        this.state.shopCardata.map(i => <ShopItem {...i} allflag={this.state.allFlag} onChange={this.onChange} editFlag={this.state.editFlag} i={i} key={i.id} /> ||
                            <div>错误</div>
                        )}
                    <Flex.Item style={{ background: '#fff', display: 'flex' , justifyContent:'space-between' }}>
                        <AgreeItem data-seed="logId"  checked = {this.state.allFlag} onChange={(e) => {this.allselect(e)}}>
                            <a onClick={(e) => { e.preventDefault(); console.log('店铺'); }} className="all_select">全选</a>
                        </AgreeItem>
                        {this.state.shopCardata && <ShopFoot/>}
                    </Flex.Item>
                </div>
            </ShopCarContainer>
        );
    }
}

export default ShopCar;